<template>
	<view id="bind-tb-account">
		<view v-if="isAuthTb">
			<view class="qrcode-box">
				<view class="image">
					<image :src="qrcodeSrc" v-if="qrcodeSrc"/>
					<image src="" v-show="!qrcodeSrc"/>
					<view class="tips">长按保存图片</view>
				</view>
				<button class="refresh-btn" @click="refreshQrcode">刷新 <text v-if="refreshTimer">{{refreshTime}}</text></button>
			</view>
			<view class="bind-description">
				<view class="content">
					绑号流程：先保存二维码，打开淘宝APP扫描二维码，确认授权账号，然后回到此页面点击下一步
				</view>
				<view class="note">
					<view class="note-icon el-icon-ali-note"></view>
					<view class="note-content">请务必先扫描授权后，再点击下一步</view>
				</view>
			</view>
			<button class="btn-style next-btn" @click="checkDataSync">扫码授权，下一步</button>
		</view>
		<view v-else>
			<view class="input-box">
				<input class="input" v-model="tbAccount" type="text" value="" />
				<image v-show="tbAccount" class="clear-btn" @click="tbAccount = ''" src="../../static/img/clear.png" mode=""></image>
			</view>
			<view class="bind-description" style="margin-top: 32upx;">
				<view class="content">
					请输入刚才绑定的旺旺号
				</view>
				<view class="note">
					<view class="note-icon el-icon-ali-note"></view>
					<view class="note-content">一定要扫码后，再下一步否则会影响审核时间</view>
				</view>
			</view>
			<view class="img-box">
				<image class="img-modal" src="../../static/img/tb_account.png" mode=""></image>
			</view>
			<button class="btn-style submit-btn" :loading="loading" :disabled="btnFlag" @click="submitTbAccountCheck">{{btText}}</button>
			<button class="btn-style on-btn"  @click="backStep">返回上一步</button>

		</view>
		<u-modal
			:showModal="isShowModal"
			title="提示"
			:autoClose = "false"
			:showCancel = "false"
			:showConfirm= "false"
			>
			<view class="modal-contet">
				<view class="title">请稍等！系统正在同步数据</view>
				<view class="random-number">{{countdownNum}}</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		apiCreateXaBind,
		apiJudgeXaData,
		apiJudgeAgainXaData,
		apiGetXaTbName,
		apiJudgeAgainNewXaData
	} from '../../../http/apis.js'
	import uModal from '../../components/uni-modal/uni-modal.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(['token'])
		},
		components:{
			uModal
		},
		data(){
			return{
				refreshTimer: null, // 刷新定时器
				refreshTime: 60,// 刷新时长
				validateAccountText: '授权失败，请在60秒后重新授权验号',// 验证账号文本
				submitErrorTimer: null,// 提交失败自动跳转会扫码页面的定时器
				qrcodeSrc: '',
				loading: false,
				isShowModal: false,
				countdownNum: 90,
				checkTimer: null,
				isAuthTb: true,
				tbAccount: '',
				addCountNum: 0,
				addTimer: null,
				authType: 'init',
				btloadingNum: 90,
				btText:'90秒',
				btTimer:null,
				btnFlag:true
			}
		},
		onShow() {

		},
		onLoad(options) {
			clearInterval(this.checkTimer);
			this.getInitData()
			this.authType = options.type ?  options.type : 'init'

		},
		methods:{
			getInitData(){
				uni.showLoading({
					title: '二维码生成中',
					mask: true
				})
				apiCreateXaBind({
					token: uni.getStorageSync('token')
				}).then(res =>{
					uni.hideLoading()
				    if(res.data.code == 1)  {
						this.qrcodeSrc = res.data.url
					} else if (res.data.code == -1) {
						this.qrcodeSrc = ""
						this.$msg.showToast(res.data.msg)
					} else {
						this.$msg.showToast(res.data.msg)
					}
				}).catch(res => {
					this.$msg.showToast(res.data.msg)
				})
			},
			btLoading(){
				this.btTimer = setInterval(() => {
					this.btloadingNum=this.btloadingNum-1;

						this.btText=this.btloadingNum+'秒'
							console.log(this.btText);
					if (this.btloadingNum === 0) {
						clearTimeout(this.btTimer);
						this.btTimer = null;
						this.btnFlag=false
						this.btloadingNum=90
						this.btText='提交'
						return;
					}
				}, 1000);
			},
			refreshQrcode(){
				if (this.refreshTimer) return
				this.getInitData()
				this.refreshTimer = setInterval(() => {
					this.refreshTime = this.refreshTime - 1
					if (this.refreshTime == 0) {
						clearInterval(this.refreshTimer)
						this.refreshTimer = null
						this.refreshTime = 60
					}
				}, 1000)
			},
			// 返回上一步
			backStep(){
				// 清除提交失败定时器
				if (this.submitErrorTimer) {
					clearTimeout(this.submitErrorTimer)
					this.submitErrorTimer = null
				}
				// 清除提交按钮的定时器
				clearInterval(this.btTimer)
				// 清除刷新按钮的定时器
				clearInterval(this.refreshTimer)
				this.refreshTimer = null
				// 重置提交按钮倒计时
				this.btloadingNum = 30
				// 重置刷新按钮倒计时
				this.refreshTime = 60
				// 禁用提交按钮
				this.btnFlag = true
				// 切换扫码授权页
				this.isAuthTb = true
				this.getInitData()
			},
			// 扫码授权
			checkDataSync(){
				this.tbAccount = ''
				this.isAuthTb = false
				this.addCountNum = 0
				this.addCount()
				this.btLoading()
				// apiGetXaTbName({
				// 	token: uni.getStorageSync('token')
				// }).then(res =>{
				//     if(res.data.code == 1)  {
				// 		this.tbAccount = res.data.msg
				// 		this.isAuthTb = false
				// 		this.addCountNum = 0
				// 		this.addCount()

				// 	} else {
				// 		this.$msg.showToast(res.data.msg)
				// 	}
				// }).catch(res => {
				// 	this.$msg.showToast(res.data.msg)
				// })
			},
			submitTbAccountCheck(){
				if(!this.tbAccount){
					this.$msg.showToast('淘宝账号不能为空')
					return
				}
        if (this.tbAccount.split("")[0] == " " || this.tbAccount.split("")[this.tbAccount.length-1] == " ") {
          this.$msg.showToast("请删除账号前后空格");
          return;
        }
				if(this.addCountNum < 10){
					uni.showLoading({
						title: '提交中，请稍等',
						mask: true
					})
					let time = (10 - this.addCountNum) * 1000
					setTimeout(()=>{
						this.sendAjax()
					},time)
				} else {
					this.sendAjax()
				}

			},
			sendAjax(){
				this.loading = true
				this.btnFlag= true
				if(this.authType == 'init'){
					apiJudgeXaData({
						token: uni.getStorageSync('token'),
						ww: this.tbAccount
					}).then(res =>{
						uni.hideLoading()
					    if(res.data.code == 1)  {
							this.$msg.showToast(res.data.msg)
							setTimeout(()=>{
								this.loading = false
									this.btnFlag= false
								uni.switchTab({
									url: '../home/home'
								})
							},500)
						} else {
							this.returnPre(res)
						}
					}).catch(res => {
						uni.hideLoading()
						this.loading = false
							this.btnFlag= false
						this.$msg.showToast(res.data.msg || this.validateAccountText)
					})
				} else if(this.authType == 'again') {
					apiJudgeAgainXaData({
						token: uni.getStorageSync('token'),
						ww: this.tbAccount
					}).then(res =>{
						uni.hideLoading()
					    if(res.data.code == 1)  {
							this.$msg.showToast(res.data.msg)
							setTimeout(()=>{
								this.loading = false
									this.btnFlag= false
								uni.switchTab({
									url: '../home/home'
								})
							},1000)
						} else {
							this.returnPre(res)
						}
					}).catch(res => {
						uni.hideLoading()
						this.loading = false
							this.btnFlag= false
						this.$msg.showToast(res.data.msg || this.validateAccountText)
					})
				} else {
					apiJudgeAgainXaData({
						// apiJudgeAgainNewXaData({
						token: uni.getStorageSync('token'),
						ww: this.tbAccount
					}).then(res =>{
						uni.hideLoading()
					    if(res.data.code == 1)  {
							this.$msg.showToast(res.data.msg)
							setTimeout(()=>{
								this.loading = false
									this.btnFlag= false
								uni.switchTab({
									url: '../home/home'
								})
							},1000)
						} else {
							this.returnPre(res)
						}
					}).catch(res => {
						uni.hideLoading()
						this.loading = false
							this.btnFlag= false
						this.$msg.showToast(res.data.msg || this.validateAccountText)
					})
				}

			},
			returnPre(res) {
				this.loading = false// 提交按钮的loading
				this.btnFlag= false// 提交按钮是否禁用
				let _this = this
				uni.showToast({
					title: res.data.msg || this.validateAccountText,
					duration: 5000,
					icon:'none',
					success() {
						// 提交失败自动跳转会扫码页面的定时器
						_this.submitErrorTimer = setTimeout(() => {
							_this.backStep()
						}, 60000)
					}
				})

			},
			addCount(){
				this.addTimer = setInterval(() => {
					this.addCountNum++;
					if (this.addCountNum >= 10) {
						clearTimeout(this.addTimer);
						this.addTimer = null;
						return;
					}
				}, 1000);
			},
			checkCountdown() {
				this.checkTimer = setInterval(() => {
					this.countdownNum--;
					if (this.countdownNum <= 0) {
						this.clearCheckTimeOut();
						return;
					}
				}, 1000);
			},
			clearCheckTimeOut() {
				clearTimeout(this.checkTimer);
				this.isShowModal = false;
				this.checkTimer = null;

			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #f5f5f5;
	}
	#bind-tb-account{
		.qrcode-box {
			position: relative;
			background: #FFFFFF;
			padding-bottom: 60upx;


			.image {
				width: 336upx;
				margin: 0 auto 20upx auto;
				padding-top: 48upx;
				.tips {
					text-align: center;
					font-size: 24upx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: #999999;
					line-height: 34upx;
				}
			}

			.image image {
				display: block;
				width: 336upx;
				height: 336upx;
			}
			.refresh-btn {
				position: absolute;
				bottom: -32upx;
				left: 36%;
				width: 200upx;
				height: 64upx;
				background: linear-gradient(90deg, #FF8C00 0%, #FF5001 100%);
				border-radius: 10upx;
				font-size: 30upx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 64upx;
			}
		}
		.bind-description {
			background: #FFFFFF;
			margin-top: 82upx;
			padding: 32upx;
			.content {
				font-size: 30upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 48upx;
			}
			.note {
				margin-top: 32upx;
				.note-icon {
					font-size: 32upx;
					color: $theme-color;
					display: inline-block;
					margin-right: 32upx;
				}
				.note-content {
					display: inline-block;
					font-size: 30upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FF5001;
					line-height: 48upx;
				}
			}
		}
		.input-box {
			margin: 32upx 32upx 0 32upx;
			position: relative;
			.input{
				border: 1px solid #E9E9E9;
				background: #FFFFFF;
				height: 80upx;
				border-radius: 10upx;
				padding-left: 32upx;
				font-size: 28upx;
			}
			.clear-btn {
				width: 34upx;
				height: 34upx;
				position: absolute;
				right: 16upx;
				top: 14upx;
				padding: 10upx;
				background: #fff;
			}
		}
		.img-box {
			margin: 60upx;
			.img-modal {
				width: 100%;
				border: 2px solid #FFFFFF;
			}
		}
		.btn-style{
			margin: 32upx;
			height: 96upx;

			border-radius: 10upx;
			font-size: 32upx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			line-height: 96upx;
			margin-top: 48upx;
		}
		.next-btn {
			background: $theme-background-color;
		}
		.on-btn {
			background: #FF8C00;
		}
		.submit-btn {
			background: $theme-color;
		}
		.modal-contet {
			text-align: center;
			.title {
				color: $theme-color;
			}
			.random-number {
				border: 1px dashed #E0E0E0;
				font-size: 80upx;
				display: inline-block;
				width: 240upx;
				height: 240upx;
				line-height: 240upx;
				border-radius: 100%;
				margin: 20upx 0;
				color: $theme-color;
			}
		}

	}
</style>
